<template>
  <div class="sortList">
    <label>归并排序动画演示</label>
    <div>
      <div class="top-box"></div>
      <div class="center-box">
        <div class="box2"></div>
        <div class="box2"></div>
      </div>
      <div class="center-box2">
        <div class="box3"></div>
        <div class="box3"></div>
        <div class="box3"></div>
        <div class="box3"></div>
      </div>
      <div class="buttom-box">
        <div class="box4"></div>
        <div class="box4"></div>
        <div class="box4"></div>
        <div class="box4"></div>
        <div class="box4"></div>
        <div class="box4"></div>
        <div class="box4"></div>
      </div>
    </div>
    <div class=" num num1 " :class="{ num1a: isAnimation }">7</div>
    <div class="num num2 " :class="{ num2a: isAnimation }">23</div>
    <div class="num num3" :class="{ num3a: isAnimation }">45</div>
    <div class="num num4" :class="{ num4a: isAnimation }">12</div>
    <div class="num num5" :class="{ num5a: isAnimation }">33</div>
    <div class="num num6" :class="{ num6a: isAnimation }">35</div>
    <div class="num num7" :class="{ num7a: isAnimation }">28</div>
    <el-button class="start-btn" type="primary" style="margin-top: 20px;" @click="handleClick">开始演示</el-button>
  </div>
</template>

<style lang="scss">
.sortList {
  position: relative;
  width: 100%;
  height: 600px;

  .top-box {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100px;
    border: 2px solid #ccc;
    border-radius: 10px;
  }

  .center-box {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    left: 0;
    top: 170px;

    .box2 {
      width: 47%;
      height: 100px;
      border: 2px solid #ccc;
      border-radius: 10px;
    }
  }

  .center-box2 {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    left: 0;
    top: 290px;

    .box3 {
      width: 23%;
      height: 100px;
      border: 2px solid #ccc;
      border-radius: 10px;
    }
  }

  .buttom-box {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    left: 0;
    top: 410px;

    .box4 {
      width: 13%;
      height: 100px;
      border: 2px solid #ccc;
      border-radius: 10px;
    }
  }


  .num {
    width: 50px;
    margin-left: 30px;
    margin-right: 30px;
    background: #409EFF;
    border-radius: 10px;
    text-align: center;
    color: aliceblue;
    transform: all 0.5s;
  }

  .num1 {
    position: absolute;
    top: 134px;
    left: 120px;
    height: 14px;
    line-height: 14px;
  }

  .num1a {
    animation: animation-num1 25s linear forwards;
  }

  .num2 {
    position: absolute;
    top: 102px;
    left: 245px;
    height: 46px;
    line-height: 46px;
    background: #67C23A;

  }

  .num2a {
    animation: animation-num2 25s linear forwards;
  }

  .num3 {
    position: absolute;
    top: 58px;
    left: 370px;
    height: 46px;
    height: 90px;
    line-height: 90px;
    background: #E6A23C;

  }

  .num3a {

    animation: animation-num3 25s linear forwards;
  }

  .num4 {
    position: absolute;
    top: 124px;
    left: 495px;
    height: 24px;
    line-height: 24px;
    background: #F56C6C;

  }

  .num4a {

    animation: animation-num4 25s linear forwards;
  }

  .num5 {
    position: absolute;
    top: 82px;
    left: 620px;
    height: 66px;
    line-height: 66px;
    background: #909399;

  }

  .num5a {

    animation: animation-num5 25s linear forwards;
  }

  .num6 {
    position: absolute;
    top: 78px;
    left: 745px;
    height: 70px;
    line-height: 70px;
    background: slateblue;

  }

  .num6a {

    animation: animation-num6 25s linear forwards;
  }

  .num7 {
    position: absolute;
    top: 92px;
    left: 870px;
    height: 56px;
    line-height: 56px;
    background: #337ecc;

  }

  .num7a {

    animation: animation-num7 25s linear forwards;
  }


  .start-btn {
    position: absolute;
    left: 0;
    top: 520px;
  }
}

@keyframes animation-num1 {
  4% {
    top: 254px;
    left: 0px;
  }

  5% {
    top: 254px;
    left: 0px;
  }

  8% {
    top: 374px;
    left: 0px;
  }

  9% {
    top: 374px;
    left: 0px;
  }

  12% {
    opacity: 1;
    top: 494px;
    left: 0px;
  }

  13% {
    opacity: 0;
    top: 494px;
    left: 0px;
  }

  14% {
    opacity: 1;
    top: 494px;
    left: 0px;
  }

  16% {
    opacity: 1;
    top: 374px;
    left: 0px;
  }

  29% {
    opacity: 1;
    top: 374px;
    left: 0px;
  }

  30% {
    opacity: 0;
    top: 374px;
    left: 0px;
  }

  31% {
    opacity: 1;
    top: 374px;
    left: 0px;
  }

  32% {
    top: 374px;
    left: 0px;
  }

  36% {
    top: 254px;
    left: 0px;
  }

  72% {
    opacity: 1;
    top: 254px;
    left: 0px;
  }

  73% {
    opacity: 0;
    top: 254px;
    left: 0px;
  }

  74% {
    opacity: 1;
    top: 254px;
    left: 0px;
  }

  76% {
    top: 134px;
    left: 120px;
  }

  100% {
    top: 134px;
    left: 120px;
  }
}

@keyframes animation-num2 {
  4% {
    top: 222px;
    left: 120px;
  }

  5% {
    top: 222px;
    left: 120px;
  }

  8% {
    top: 342px;
    left: 120px;
  }

  9% {
    top: 342px;
    left: 120px;
  }

  12% {
    opacity: 1;
    top: 462px;
    left: 150px;
  }

  13% {
    opacity: 0;
    top: 462px;
    left: 150px;
  }

  14% {
    opacity: 1;
    top: 462px;
    left: 150px;
  }

  16% {
    top: 462px;
    left: 150px;
  }

  20% {
    top: 342px;
    left: 120px;
  }

  40% {
    opacity: 1;
    top: 342px;
    left: 120px;
  }

  41% {
    opacity: 0;
    top: 342px;
    left: 120px;
  }

  42% {
    opacity: 1;
    top: 342px;
    left: 120px;
  }

  44% {
    top: 222px;
    left: 240px;
  }

  80% {
    opacity: 1;
    top: 222px;
    left: 240px;
  }

  81% {
    opacity: 0;
    top: 222px;
    left: 240px;
  }

  82% {
    opacity: 1;
    top: 222px;
    left: 240px;
  }

  84% {
    top: 102px;
    left: 370px;
  }

  100% {
    top: 102px;
    left: 370px;
  }
}

@keyframes animation-num3 {
  4% {
    top: 178px;
    left: 300px;
  }

  5% {
    top: 178px;
    left: 300px;
  }

  8% {
    top: 298px;
    left: 300px;
  }

  9% {
    top: 298px;
    left: 300px;
  }

  12% {
    top: 418px;
    left: 320px;
  }

  20% {
    opacity: 1;
    top: 418px;
    left: 320px;
  }

  21% {
    opacity: 0;
    top: 418px;
    left: 320px;
  }

  22% {
    opacity: 1;
    top: 418px;
    left: 320px;
  }

  24% {
    top: 418px;
    left: 320px;
  }

  28% {
    top: 298px;
    left: 400px;
  }

  40% {
    opacity: 1;
    top: 298px;
    left: 400px;
  }

  41% {
    opacity: 0;
    top: 298px;
    left: 400px;
  }

  42% {
    opacity: 1;
    top: 298px;
    left: 400px;
  }

  44% {
    top: 298px;
    left: 400px;
  }

  48% {
    top: 178px;
    left: 390px;
  }

  84% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  85% {
    opacity: 0;
    top: 178px;
    left: 390px;
  }

  86% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  88% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  89% {
    opacity: 0;
    top: 178px;
    left: 390px;
  }

  90% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  92% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  93% {
    opacity: 0;
    top: 178px;
    left: 390px;
  }

  94% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  96% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  97% {
    opacity: 0;
    top: 178px;
    left: 390px;
  }

  98% {
    opacity: 1;
    top: 178px;
    left: 390px;
  }

  100% {
    top: 58px;
    left: 870px;
  }
}

@keyframes animation-num4 {
  4% {
    top: 244px;
    left: 425px;
  }

  5% {
    top: 244px;
    left: 425px;
  }

  8% {
    top: 364px;
    left: 425px;
  }

  9% {
    top: 364px;
    left: 425px;
  }

  12% {
    top: 484px;
    left: 475px;
  }

  20% {
    opacity: 1;
    top: 484px;
    left: 475px;
  }

  21% {
    opacity: 0;
    top: 484px;
    left: 475px;
  }

  22% {
    opacity: 1;
    top: 484px;
    left: 475px;
  }

  24% {
    top: 364px;
    left: 320px;
  }

  29% {
    opacity: 1;
    top: 364px;
    left: 320px;
  }

  30% {
    opacity: 0;
    top: 364px;
    left: 320px;
  }

  31% {
    opacity: 1;
    top: 364px;
    left: 320px;
  }

  36% {
    top: 364px;
    left: 320px;
  }

  40% {
    top: 244px;
    left: 120px;
  }

  76% {
    opacity: 1;
    top: 244px;
    left: 120px;
  }

  77% {
    opacity: 0;
    top: 244px;
    left: 120px;
  }

  78% {
    opacity: 1;
    top: 244px;
    left: 120px;
  }

  80% {
    top: 124px;
    left: 245px;
  }

  100% {
    top: 124px;
    left: 245px;
  }
}

@keyframes animation-num5 {
  0% {
    top: 82px;
    left: 620px;
  }

  4% {
    top: 202px;
    left: 640px;
  }

  5% {
    top: 202px;
    left: 640px;
  }

  8% {
    top: 322px;
    left: 600px;
  }

  9% {
    top: 322px;
    left: 600px;
  }

  12% {
    top: 442px;
    left: 670px;
  }

  48% {
    opacity: 1;
    top: 442px;
    left: 670px;
  }

  49% {
    opacity: 0;
    top: 442px;
    left: 670px;
  }

  50% {
    opacity: 1;
    top: 442px;
    left: 670px;
  }

  52% {
    top: 322px;
    left: 620px;
  }

  61% {
    opacity: 1;
    top: 322px;
    left: 620px;
  }

  62% {
    opacity: 0;
    top: 322px;
    left: 620px;
  }

  63% {
    opacity: 1;
    top: 322px;
    left: 620px;
  }

  66% {
    top: 322px;
    left: 620px;
  }

  68% {
    top: 202px;
    left: 765px;
  }

  88% {
    opacity: 1;
    top: 202px;
    left: 765px;
  }

  89% {
    opacity: 0;
    top: 202px;
    left: 765px;
  }

  90% {
    opacity: 1;
    top: 202px;
    left: 765px;
  }

  92% {
    top: 82px;
    left: 620px;
  }

  100% {
    top: 82px;
    left: 620px;
  }
}

@keyframes animation-num6 {
  0% {
    top: 78px;
    left: 745px;
  }

  4% {
    top: 198px;
    left: 765px;
  }

  5% {
    top: 198px;
    left: 765px;
  }

  8% {
    top: 318px;
    left: 705px;
  }

  9% {
    top: 318px;
    left: 705px;
  }

  12% {
    top: 438px;
    left: 830px;
  }

  48% {
    opacity: 1;
    top: 438px;
    left: 830px;
  }

  49% {
    opacity: 0;
    top: 438px;
    left: 830px;
  }

  50% {
    opacity: 1;
    top: 438px;
    left: 830px;
  }

  52% {
    top: 438px;
    left: 830px;
  }

  56% {
    top: 318px;
    left: 705px;
  }

  68% {
    opacity: 1;
    top: 318px;
    left: 705px;
  }

  69% {
    opacity: 0;
    top: 318px;
    left: 705px;
  }

  70% {
    opacity: 1;
    top: 318px;
    left: 705px;
  }

  72% {
    top: 198px;
    left: 890px;
  }

  92% {
    opacity: 1;
    top: 198px;
    left: 890px;
  }

  93% {
    opacity: 0;
    top: 198px;
    left: 890px;
  }

  94% {
    opacity: 1;
    top: 198px;
    left: 890px;
  }

  96% {
    top: 78px;
    left: 745px;
  }

  100% {
    top: 78px;
    left: 745px;
  }
}

@keyframes animation-num7 {
  0% {
    top: 92px;
    left: 870px;
  }

  4% {
    top: 212px;
    left: 890px;
  }

  5% {
    top: 212px;
    left: 890px;
  }

  8% {
    top: 332px;
    left: 930px;
  }

  9% {
    top: 332px;
    left: 930px;
  }

  12% {
    top: 452px;
    left: 990px;
  }

  56% {
    opacity: 1;
    top: 452px;
    left: 990px;
  }

  57% {
    opacity: 0;
    top: 452px;
    left: 990px;
  }

  58% {
    opacity: 1;
    top: 452px;
    left: 990px;
  }

  60% {
    top: 332px;
    left: 920px;
  }

  61% {
    opacity: 1;
    top: 332px;
    left: 920px;
  }

  62% {
    opacity: 0;
    top: 332px;
    left: 920px;
  }

  63% {
    opacity: 1;
    top: 332px;
    left: 920px;
  }

  66% {
    top: 212px;
    left: 640px;
  }

  72% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  73% {
    opacity: 0;
    top: 212px;
    left: 640px;
  }

  74% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  76% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  77% {
    opacity: 0;
    top: 212px;
    left: 640px;
  }

  78% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  80% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  81% {
    opacity: 0;
    top: 212px;
    left: 640px;
  }

  82% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  84% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  85% {
    opacity: 0;
    top: 212px;
    left: 640px;
  }

  86% {
    opacity: 1;
    top: 212px;
    left: 640px;
  }

  88% {
    top: 92px;
    left: 495px;
  }

  100% {
    top: 92px;
    left: 495px;
  }
}
</style>

<script setup>
import { computed, ref, onMounted } from "vue";
let isAnimation = ref(false);
const handleClick = () => {
  isAnimation.value = !isAnimation.value;
}
</script>